<template>
	<div class="app-home-vue h-panel">
		<div class="h-panel-bar">
			<span class="h-panel-title">页面设计</span>
			<div class="h-panel-right"></div>
		</div>
		<div class="h-panel-body">
			<Table :loading="loading" :datas="styles">
				<TableItem :width="80" prop="id" align="center" title="编号"></TableItem>
				<TableItem :width="200" prop="name" align="center" title="页面名称"></TableItem>
				<TableItem :width="200" prop="path" align="center" title="路径"></TableItem>
				<TableItem :width="150" align="center" title="修改时间">
					<template slot-scope="{data}">
						{{$global.getDateTime(data.update_time)}}
					</template>
				</TableItem>
				<TableItem :width="150" align="center" title="创建时间">
					<template slot-scope="{data}">
						{{$global.getDateTime(data.create_time)}}
					</template>
				</TableItem>
				<TableItem :width="60" align="center" title="操作" fixed="right">
					<template slot-scope="{data}">
						<button class="h-btn h-btn-s h-btn-blue" title="编辑" @click="doEdit(data.id)"><i class="icon bianji"></i></button>
					</template>
				</TableItem>
			</Table>
			<p></p>
			<Pagination v-if="pagination.total>0"  align="right" v-model="pagination" @change="getData(false)" />
		</div>
		<Modal v-model="openEdit" :closeOnMask="false">
			<Edit @close="openEdit=false" :id="id"></Edit>
		</Modal>
	</div>
</template>

<script>
import Edit from './edit';
export default {
	components : {
		Edit
	},
	data() {
		return {
			id : 0,
			openEdit : false,
			styles: [],
			pagination: {
				page: 1,
				size: 20,
				total: 0
			},
			loading: false
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		doEdit (id){
			this.id = id
			this.openEdit = true
		},
		async getData(reload = true) {
			if (reload) {
				this.pagination.page = 1
			}
			this.loading = true
			let data = await this.$api('GET','style',{page:this.pagination.page,pageSize:this.pagination.size})
			this.styles = data.data
			this.pagination.total = data.total
			this.loading = false
		}
	}
}
</script>

<style lang="less">
	.info-title {
		font-size: 16px;
		font-weight: bold;
	}
</style>